<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<view class="navigation" :style="{'opacity':getOpacity}">
			<view class="nav-tab base-select">
				<view class="tab-item" :class="{current:tabActive == 0}" @click="pageScrollTo(0)">商品</view> 
				<view class="tab-item" :class="{current:tabActive == 2}" @click="pageScrollTo(2)">详情</view>
			</view>
		</view>
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400" autoplay=true>
				<swiper-item v-if="selectGoods.video_position == 1 && selectGoods.video_url != ''" class="swiper-item">
					<view class="image-wrapper">
						<video controls  autoplay="false" :muted="sound" :src="baseUrl+selectGoods.video_url" style="width: 100%;height: 100%;" >
							<cover-image @click="changevoice" class="voice" :src="sound?mute:voice"></cover-image>
						</video>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image :src="baseUrl+item.goods_img" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>

		<view class="introduce-section">
			<text class="title">{{selectGoods.goods_name}}</text>
			<view class="smll">
				<view class="price-box base-color flex_bd">
					<text class="price-tip fs24">¥</text>
					<text class="price ff">{{showGoodsPrice}}</text>
					<text v-if="selectGoods.is_spec == 1" class="font-w700 ml10">起</text>
					<text v-if="prom_id > 0" class="ml10 bg-base color-ff plr10 fs24">活动价</text>
					<text class="m-price fs26 ml20" v-if="selectGoods.show_market_price == 1">原价: {{showGoodSmarketPrice}}</text>
				</view>
				 
			</view>
		 
			<view class="bot-row">
				<view>
					<text v-if="selectGoods.show_stock_num == 1 && selectGoods.is_spec == 0">库存: {{selectGoodsNumber}}</text> 
					<text v-if="selectGoods.show_sale_num == 1">已售:{{selectGoods.sale_count}}</text> 
				</view>
			 
			</view>
		</view>

	

		<view id="detail_desc" class="detail_desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<video v-if="selectGoods.video_position == 2 && selectGoods.video_url != ''" controls  autoplay="false" :muted="sound" :src="baseUrl+selectGoods.video_url" style="width: 100%;" >
				<cover-image @click="changevoice" class="voice" :src="sound?mute:voice"></cover-image>
			</video>
			<rich-text :nodes="desc"></rich-text>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom flex">
			<view @click="app.goPage('/pages/shop/index/index')" class="p-b-btn ">
				<u-icon  name="home"  size="46" color="#000"></u-icon>
				<text>首页</text>
			</view>
			
			<view @click="app.goPage('/pages/jxcshop/goods/index')" class="p-b-btn ">
				<u-icon  name="home"  size="46" color="#000"></u-icon>
				<text>门店首页</text>
			</view>
			
			<view @click="app.goPage('/pages/jxcshop/flow/cart')" class="p-b-btn relative"  v-if="selectGoods.goods_type == 0 ">
				<u-icon name="shopping-cart" size="46" color="#000"></u-icon>
				<text>进货单</text>
				<view class="cartNum bg-base">{{cartNum}}</view>
			</view>
		 
			<view class="action_btn_group primarybtnB flex_bd">
				<view class=" action_btn no-border "  @click="toggleSpec('oncart')">加入进货单</view>
				<view class=" action_btn no-border "  @click="toggleSpec('onbuy')">立即购买</view>
			</view>
		</view>
		<!--end 底部按钮 -->
		<goodsSpec :specClass="specClass" @selectSpec="selectSpec" @toggleSpec="toggleSpec" :specSelected="specSelected"
		 :selectGoods="selectGoods" :selectGoodsPrice="selectGoodsPrice" :selectGoodSmarketPrice="selectGoodSmarketPrice"
		 :selectGoodsNumber="selectGoodsNumber" :selectGoodsImg="selectGoodsImg" :specList="specList" :specChildList="specChildList"
		:selectSkuId="selectSkuId" :prom_id="prom_id" :prom_type="prom_type" :byType="byType"></goodsSpec>

	</view>
</template>

<script>
	import goodsSpec from '@/pages/jxcshop/goods/spec';
	export default {
		components: {
			goodsSpec,
		},
		data() {
			return {
				goods_id: 0,
				cartNum: 0,
				scrollTop: 0,
				tabActive: 0,
				detailDesclTop: 0,
				commentTop: 0,
				baseUrl: this.config.baseUrl,
				specClass: 'none',
				specSelected: [],
				byType: '',
				imgList: [],
				desc: '',
				showGoodsPrice: '0.00',
				showGoodSmarketPrice:'0.00',
				specList: [],
				specChildList: [],
				selectGoods: {}, //选择的商品
				selectSkuId:0,
				selectGoodsPrice: '0.00',
				selectGoodSmarketPrice: '0.00',
				selectGoodsNumber: 0,
				selectGoodsImg: '',
				comment: {
					count: 0,
					list: [],
				},
				isLoading:false,
				isProm:false,
				prom_type:0,
				prom_id:0,
				liveCountTimes:'',
				times:{},
				sound: false,
				mute:'/static/public/images/video_icon/mute.png',
				voice:'/static/public/images/video_icon/voice.png',
			};
		},
		async onLoad(options) {
			if (options.scene){//获取小程序的场景值，用于获取分享者的token
				let scene = options.scene.split('_');
				uni.setStorageSync("share_token",scene[0]);
				this.goods_id = scene[1];
			}else{
				this.goods_id = options.goods_id;
			}
			this.getGoodsInfo();
	
			this.loadCartNum();
		},
		onShow(options) {
			
			let platform = this.app.getPlatform();
			// let result = wx.getLaunchOptionsSync();
			
		},
		computed: {
			getOpacity() {
				return this.scrollTop > 60 ? 1 : 0;
			}
		},
		methods: {
			//获取商品信息
			getGoodsInfo() {
				this.$u.post('jxcshop/api.goods/getGoodsInfo', {
					'goods_id': this.goods_id
				}).then(res => {
					this.selectGoods = res.data;
					this.imgList = res.data.imgList;
					this.desc = res.data.m_goods_desc;
					if (this.selectGoods.is_spec == 0) {
						this.selectGoodsImg = this.config.baseUrl + res.data.goods_thumb;
						this.selectGoodsPrice = res.data.sale_price;
						this.selectGoodSmarketPrice = res.data.market_price;
						this.showGoodsPrice = res.data.sale_price
						this.showGoodSmarketPrice = res.data.market_price;
						this.selectGoodsNumber = res.data.goods_number;
					} else {
						this.specList = res.data.specList;
						this.specChildList = res.data.specChildList;
						this.specSelected = [];
						this.showGoodsPrice = res.data.min_price
						this.showGoodSmarketPrice = res.data.market_price;
						this.showSelectSpec();
					}
					this.initActivity(true);
					let that = this;
					setTimeout(function() {
						that.getSelectorQuery();
					}, 1000);
				})
			},
			//初始化商品活动
			initActivity(type = false){
				if (type == false && this.isProm == false){
					return false;
				}
				this.prom_id = 0;
				this.$u.post('jxcshop/api.goods/checkactivity', {
					'goods_id': this.goods_id,
					'sku_id':this.selectSkuId
				}).then(res => {
					if (res.data.activity_is_on == 1){
						this.isProm = true;
						if (res.data.goods_info){
							this.showGoodsPrice = res.data.goods_info.goods_price;
							this.selectGoodsPrice =  res.data.goods_info.goods_price;
							this.selectGoodSmarketPrice = res.data.goods_info.market_price;
							this.showGoodSmarketPrice = res.data.goods_info.market_price;
							this.prom_type = res.data.prom_type;
							this.prom_id = res.data.prom_id;
						}
						if (this.liveCountTimes == ''){
							this.getLiveTimeCount(res.data.end_time);
						}
						
					}
				})
			},
			getLiveTimeCount(time){
				this.times = {
					day: '00',
					hou: '00',
					min: '00',
					sec: '00'
				};
				if (time == 0) return false; 
				if (typeof(this.liveCountTimes) != 'undefined'){
					clearInterval(this.liveCountTimes);
				}
				this.liveCountTimes=setInterval(()=>{
					let nowTime = new Date().getTime();
					//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
					let transedPreTime= time.replace(/-/g,'/') //这里转化时间格式为以/分隔形式
					let preTime = new Date(transedPreTime).getTime()
					if(preTime - nowTime > 0){
						let time = (preTime - nowTime) / 1000;
						if (time > 0){
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							let msec = Math.floor(time * 1000 % 1000 / 100);
							this.times = {
								day: day<10?'0'+day:day,
								hou: hou<10?'0'+hou:hou,
								min: min<10?'0'+min:min,
								sec: sec<10?'0'+sec:sec
							};
						}else{
							this.prom_id = 0;
						}
					}else{
						this.prom_id = 0;
					}
				},1000)
			},
		 
	 
			onPageScroll(res) {
				this.scrollTop = res.scrollTop;
				if (res.scrollTop >= this.detailDesclTop) {
					this.tabActive = 2;
				} else {
					if (this.selectGoods.shop_goods_comment == 1 && res.scrollTop >= this.commentTop) {
						this.tabActive = 1;
					} else {
						this.tabActive = 0;
					}
				}
			},
			//获取定位
			getSelectorQuery() {
				let that = this;
				const query = uni.createSelectorQuery();
				if (that.selectGoods.shop_goods_comment == 1) {
					query.select('#comment').boundingClientRect(function(res) {
						that.commentTop = res.top - 40;
						//console.log('打印demo的元素的信息', res);
					})
				}
				query.select('#detail_desc').boundingClientRect(function(res) {
					that.detailDesclTop = res.top - 40;
					//console.log('打印demo的元素的信息', res);
				})
				query.exec()
			},
			pageScrollTo(index) {
				let scrollTop = 0;
				if (index == 1) {
					scrollTop = this.commentTop;
				} else if (index == 2) {
					scrollTop = this.detailDesclTop;
				}
				uni.pageScrollTo({
					duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
					scrollTop: scrollTop, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				})
			},
			//规格弹窗开关
			toggleSpec(type = 'oncart') {
				if (this.specClass === 'show') {
					this.loadCartNum();
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
				this.byType = type;
			},
			//选择规格
			selectSpec(list) {
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})
				this.showSelectSpec();
			},
			showSelectSpec() {
				this.selectSkuId = 0;
				let selSkuArr = [];
				this.specSelected.forEach(item => {
					selSkuArr.push(item.id);
				})
				let selSku = selSkuArr.join(":");
				Object.keys(this.selectGoods.sub_goods).forEach(sku_id => {
					let item = this.selectGoods.sub_goods[sku_id];
					if (selSku == item.sku_val) {
						if (item.sale_price > 0){
							this.selectSkuId = parseInt(sku_id);
							this.selectGoodsPrice = item.sale_price;
							this.selectGoodSmarketPrice = item.market_price;
							this.selectGoodsNumber = item.goods_number;
						}
						return false;
					}
				})
				if (this.selectSkuId < 1){
					this.selectGoodsImg = this.config.baseUrl + this.selectGoods.goods_thumb;
					return false;
				}
				this.initActivity();
				this.selectGoods.imgSkuList.forEach(item => {
					if (selSku == item.sku_val) {
						this.selectGoodsImg = this.config.baseUrl + item.goods_thumb;
						return false;
					}
				})
				if (this.selectGoodsImg == '') {
					this.selectGoods.imgSkuList.forEach(item => {
						let _sku = item.sku_val.split(':');
						if (selSkuArr[0] == _sku[0]) {
							this.selectGoodsImg = this.config.baseUrl + item.goods_thumb;
							return false;
						}
					})
				}
			},
			//加载购物车中商品数
			async loadCartNum() {
				this.$u.post('jxcshop/api.flow/getCartInfo').then(res => {
					this.cartNum = res.data.num;
				})
			},
			changevoice(){
				this.sound = this.sound == false ? true : false;
			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
	@import './info.scss';
	.times text{
		font-size: 23rpx;
		margin:0rpx 6rpx;
		padding:4rpx;
		background-color: #FF0000;
		color: #FFFFFF;
	}
	.detail_desc {
	   img{
			margin-top: -5px !important;
			margin-block-start: 0;
			margin-block-end: 0;
		}
	}
</style>
